<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>音乐播放器</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type="text/javascript" src="js/jquery-1.7.2.js"></script>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/axios.js"></script>
</head>

<body>

    <div id="background"></div>
    <div id="player">
        <div class="cover"></div>
        <div class="ctrl">
            <div class="tag">
                <strong>Title</strong>
                <span class="artist">Artist</span>
                <span class="album">Album</span>
            </div>
            <div class="control">
                <div class="left">
                    <div class="rewind icon"></div>
                    <div class="playback icon"></div>
                    <div class="fastforward icon"></div>
                </div>
                <div class="volume right">
                    <div class="mute icon left"></div>
                    <div class="slider left">
                        <div class="pace"></div>
                    </div>
                </div>
            </div>
            <div class="progress">
                <div class="slider">
                    <div class="loaded"></div>
                    <div class="pace"></div>
                </div>
                <div class="timer left">0:00</div>
                <div class="right">
                    <div class="repeat icon"></div>
                    <div class="shuffle icon"></div>
                </div>
            </div>
        </div>
    </div>
    <ul id="playlist"></ul>

    <script type="text/javascript" src="js/custom.min.js"></script>

    <script type="text/javascript">
        var id = window.location.href.split("=")[1]; //截取字符串
        var cwname;
        var storage = window.localStorage;
        var token = storage.getItem("token");
        var refreshToken = storage.getItem("refreshToken");
        new Vue({
            el: "#abc",
            mounted() {
                let data = {
                    "cwid": id
                }
                axios.post(
                    "/course/courseware/findCoursewareByCwid", data, {
                        headers: {
                            'Content-Type': 'application/json;charset=UTF-8',
                            "token": token,
                            "refreshToken": refreshToken
                        },
                    }).then(res => {
                    if (res.data.code == 500) {
                        location.href = "/error/500.html";
                    }
                    if (res.data.code == 200) {
                        console.log(res.data.data);
                        cwname = res.data.data.cwname;
                    }

                    (function($) {
                        // Settings
                        var repeat = localStorage.repeat || 0,
                            shuffle = localStorage.shuffle || 'false',
                            continous = true,
                            autoplay = true,
                            playlist = [{
                                title: cwname,
                                artist: '音频',
                                album: cwname + ".mp3",
                                cover: 'img/xys.jpg',
                                mp3: "http://117.51.156.132/file/" + cwname + ".mp3",
                                ogg: ''
                            }, ];

                        // Load playlist
                        for (var i = 0; i < playlist.length; i++) {
                            var item = playlist[i];
                            $('#playlist').append('<li>' + item.artist + ' - ' + item.title + '</li>');
                        }

                        var time = new Date(),
                            currentTrack = shuffle === 'true' ? time.getTime() % playlist.length : 0,
                            trigger = false,
                            audio, timeout, isPlaying, playCounts;

                        var play = function() {
                            audio.play();
                            $('.playback').addClass('playing');
                            timeout = setInterval(updateProgress, 500);
                            isPlaying = true;
                        }

                        var pause = function() {
                            audio.pause();
                            $('.playback').removeClass('playing');
                            clearInterval(updateProgress);
                            isPlaying = false;
                        }

                        // Update progress
                        var setProgress = function(value) {
                            var currentSec = parseInt(value % 60) < 10 ? '0' + parseInt(value % 60) : parseInt(value % 60),
                                ratio = value / audio.duration * 100;

                            $('.timer').html(parseInt(value / 60) + ':' + currentSec);
                            $('.progress .pace').css('width', ratio + '%');
                            $('.progress .slider a').css('left', ratio + '%');
                        }

                        var updateProgress = function() {
                            setProgress(audio.currentTime);
                        }

                        // Progress slider
                        $('.progress .slider').slider({
                            step: 0.1,
                            slide: function(event, ui) {
                                $(this).addClass('enable');
                                setProgress(audio.duration * ui.value / 100);
                                clearInterval(timeout);
                            },
                            stop: function(event, ui) {
                                audio.currentTime = audio.duration * ui.value / 100;
                                $(this).removeClass('enable');
                                timeout = setInterval(updateProgress, 500);
                            }
                        });

                        // Volume slider
                        var setVolume = function(value) {
                            audio.volume = localStorage.volume = value;
                            $('.volume .pace').css('width', value * 100 + '%');
                            $('.volume .slider a').css('left', value * 100 + '%');
                        }

                        var volume = localStorage.volume || 0.5;
                        $('.volume .slider').slider({
                            max: 1,
                            min: 0,
                            step: 0.01,
                            value: volume,
                            slide: function(event, ui) {
                                setVolume(ui.value);
                                $(this).addClass('enable');
                                $('.mute').removeClass('enable');
                            },
                            stop: function() {
                                $(this).removeClass('enable');
                            }
                        }).children('.pace').css('width', volume * 100 + '%');

                        $('.mute').click(function() {
                            if ($(this).hasClass('enable')) {
                                setVolume($(this).data('volume'));
                                $(this).removeClass('enable');
                            } else {
                                $(this).data('volume', audio.volume).addClass('enable');
                                setVolume(0);
                            }
                        });

                        // Switch track
                        var switchTrack = function(i) {
                            if (i < 0) {
                                track = currentTrack = playlist.length - 1;
                            } else if (i >= playlist.length) {
                                track = currentTrack = 0;
                            } else {
                                track = i;
                            }

                            $('audio').remove();
                            loadMusic(track);
                            if (isPlaying == true) play();
                        }

                        // Shuffle
                        var shufflePlay = function() {
                            var time = new Date(),
                                lastTrack = currentTrack;
                            currentTrack = time.getTime() % playlist.length;
                            if (lastTrack == currentTrack) ++currentTrack;
                            switchTrack(currentTrack);
                        }

                        // Fire when track ended
                        var ended = function() {
                            pause();
                            audio.currentTime = 0;
                            playCounts++;
                            if (continous == true) isPlaying = true;
                            if (repeat == 1) {
                                play();
                            } else {
                                if (shuffle === 'true') {
                                    shufflePlay();
                                } else {
                                    if (repeat == 2) {
                                        switchTrack(++currentTrack);
                                    } else {
                                        if (currentTrack < playlist.length) switchTrack(++currentTrack);
                                    }
                                }
                            }
                        }

                        var beforeLoad = function() {
                            var endVal = this.seekable && this.seekable.length ? this.seekable.end(0) : 0;
                            $('.progress .loaded').css('width', (100 / (this.duration || 1) * endVal) + '%');
                        }

                        // Fire when track loaded completely
                        var afterLoad = function() {
                            if (autoplay == true) play();
                        }

                        // Load track
                        var loadMusic = function(i) {
                            var item = playlist[i],
                                newaudio = $('<audio>').html('<source src="' + item.mp3 + '"><source src="' + item.ogg + '">').appendTo('#player');

                            $('.cover').html('<img src="' + item.cover + '" alt="' + item.album + '">');
                            $('.tag').html('<strong>' + item.title + '</strong><span class="artist">' + item.artist + '</span><span class="album">' + item.album + '</span>');
                            $('#playlist li').removeClass('playing').eq(i).addClass('playing');
                            audio = newaudio[0];
                            audio.volume = $('.mute').hasClass('enable') ? 0 : volume;
                            audio.addEventListener('progress', beforeLoad, false);
                            audio.addEventListener('durationchange', beforeLoad, false);
                            audio.addEventListener('canplay', afterLoad, false);
                            audio.addEventListener('ended', ended, false);
                        }

                        loadMusic(currentTrack);
                        $('.playback').on('click', function() {
                            if ($(this).hasClass('playing')) {
                                pause();
                            } else {
                                play();
                            }
                        });
                        $('.rewind').on('click', function() {
                            if (shuffle === 'true') {
                                shufflePlay();
                            } else {
                                switchTrack(--currentTrack);
                            }
                        });
                        $('.fastforward').on('click', function() {
                            if (shuffle === 'true') {
                                shufflePlay();
                            } else {
                                switchTrack(++currentTrack);
                            }
                        });
                        $('#playlist li').each(function(i) {
                            var _i = i;
                            $(this).on('click', function() {
                                switchTrack(_i);
                            });
                        });

                        if (shuffle === 'true') $('.shuffle').addClass('enable');
                        if (repeat == 1) {
                            $('.repeat').addClass('once');
                        } else if (repeat == 2) {
                            $('.repeat').addClass('all');
                        }

                        $('.repeat').on('click', function() {
                            if ($(this).hasClass('once')) {
                                repeat = localStorage.repeat = 2;
                                $(this).removeClass('once').addClass('all');
                            } else if ($(this).hasClass('all')) {
                                repeat = localStorage.repeat = 0;
                                $(this).removeClass('all');
                            } else {
                                repeat = localStorage.repeat = 1;
                                $(this).addClass('once');
                            }
                        });

                        $('.shuffle').on('click', function() {
                            if ($(this).hasClass('enable')) {
                                shuffle = localStorage.shuffle = 'false';
                                $(this).removeClass('enable');
                            } else {
                                shuffle = localStorage.shuffle = 'true';
                                $(this).addClass('enable');
                            }
                        });
                    })(jQuery);

                })
            }
        });
    </script>

</body>

</html>